<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body>
		<div id="app">
			<table class="table">
				<tr>
					<th>书籍id</th>
					<th>书籍标题</th>
					<th>书籍详情</th>
					<th>书籍类型</th>
					<th>书籍封面</th>
					<th>操作</th>
				</tr>
				<tr v-for="v in like">
					<td>{{v.ID}}</td>
					<td>{{v.title}}</td>
					<td>{{v.stock}}</td>
					<td>{{v.types}}</td>
					<td><img :src="v.img" width="50px"></td>
					<td><input type="button" value="删除" @click="del(v.id)"></td>
				</tr>
			</table>
			<input type="button" value="首页" @click="getpage(1)">
			<input type="button" value="上一页" @click="getpage(page-1)">
			<input type="button" :value="v" v-for="v in sumpage" @click="getpage(v)">
			<input type="button" value="下一页" @click="getpage(page+1)">
			<input type="button" value="尾页" @click="getpage(sumpage)">
		</div>
	</body>
</html>
<script>
var app = new Vue({
	el:"#app",
	data:{
		like : [],
		page : "",
		size : "",
		count : "",
		sumpage : "",
		
		Id : "",
		title : "",
		stock : "",
		types : "",
		img : "",
	},methods:{
		del(id){
			axios.get("http://127.0.0.1:8080/like/del?id="+id).then(function(res){
				console.log(res.data.msg)
				alert(res.data.msg)
				location.reload()
			})
		},
		getpage(page){
			axios.get("http://127.0.0.1:8080/like/list?user_id=3&page ="+page).then(function(res){
				console.log(res.data.data)
				app.like = res.data.data
				app.page = res.data.page
				app.size = res.data.size
				app.count = res.data.count
				app.sumpage = res.data.sumpage
			})
		},//getpage
	},created:function(){
		axios.get("http://127.0.0.1:8080/like/list?user_id=3").then(function(res){
			console.log(res.data.data)
			app.like = res.data.data
			app.page = res.data.page
			app.size = res.data.size
			app.count = res.data.count
			app.sumpage = res.data.sumpage
		})
	}
})
</script>
